<template>
  <view class="enterprise-entry-page">
    <!-- 顶部导航栏 -->
    <view class="custom-nav-bar">
      <view class="nav-left" @click="navBack">
        <text class="back-icon">←</text>
      </view>
      <view class="nav-title">企业入驻</view>
      <view class="nav-right" @click="showHelp">
        <text class="help-icon">?</text>
      </view>
    </view>

    <!-- 进度条 -->
    <view class="progress-bar">
      <view class="progress-steps">
        <view 
          class="progress-step" 
          :class="{ active: currentStep >= 1, completed: currentStep > 1 }"
        >
          <view class="step-number">1</view>
          <view class="step-name">企业信息</view>
        </view>
        <view class="progress-line" :class="{ active: currentStep > 1 }"></view>
        <view 
          class="progress-step" 
          :class="{ active: currentStep >= 2, completed: currentStep > 2 }"
        >
          <view class="step-number">2</view>
          <view class="step-name">资质认证</view>
        </view>
        <view class="progress-line" :class="{ active: currentStep > 2 }"></view>
        <view 
          class="progress-step" 
          :class="{ active: currentStep >= 3, completed: currentStep > 3 }"
        >
          <view class="step-number">3</view>
          <view class="step-name">账户设置</view>
        </view>
        <view class="progress-line" :class="{ active: currentStep > 3 }"></view>
        <view 
          class="progress-step" 
          :class="{ active: currentStep >= 4 }"
        >
          <view class="step-number">4</view>
          <view class="step-name">提交成功</view>
        </view>
      </view>
    </view>

    <!-- 表单容器 -->
    <view class="form-container">
      <!-- 步骤1：企业基本信息 -->
      <view class="form-step" v-if="currentStep === 1">
        <view class="form-header">
          <view class="form-title">企业基本信息</view>
          <view class="form-desc">请填写企业真实信息，将用于平台认证和展示</view>
        </view>
        
        <view class="form-group">
          <view class="form-label required">企业名称</view>
          <view class="form-control">
            <input 
              v-model="enterpriseInfo.name" 
              placeholder="请输入与营业执照一致的企业全称"
              maxlength="100"
            />
          </view>
        </view>
        
        <view class="form-group">
          <view class="form-label required">统一社会信用代码</view>
          <view class="form-control">
            <input 
              v-model="enterpriseInfo.creditCode" 
              placeholder="请输入18位统一社会信用代码"
              maxlength="18"
            />
          </view>
        </view>
        
        <view class="form-group">
          <view class="form-label required">企业类型</view>
          <view class="form-control">
            <picker 
              v-model="enterpriseInfo.typeIndex" 
              :range="enterpriseTypes"
              @change="onTypeChange"
            >
              <view class="picker-view">
                {{ enterpriseTypes[enterpriseInfo.typeIndex] || '请选择企业类型' }}
                <text class="picker-arrow">▼</text>
              </view>
            </picker>
          </view>
        </view>
        
        <view class="form-group">
          <view class="form-label required">所属行业</view>
          <view class="form-control">
            <picker 
              v-model="enterpriseInfo.industryIndex" 
              :range="industryOptions"
              @change="onIndustryChange"
            >
              <view class="picker-view">
                {{ industryOptions[enterpriseInfo.industryIndex] || '请选择所属行业' }}
                <text class="picker-arrow">▼</text>
              </view>
            </picker>
          </view>
        </view>
        
        <view class="form-group">
          <view class="form-label required">注册地址</view>
          <view class="form-control">
            <textarea 
              v-model="enterpriseInfo.registerAddress" 
              placeholder="请输入企业注册地址，与营业执照一致"
              maxlength="200"
              rows="3"
            ></textarea>
          </view>
        </view>
        
        <view class="form-group">
          <view class="form-label required">经营地址</view>
          <view class="form-control">
            <textarea 
              v-model="enterpriseInfo.businessAddress" 
              placeholder="请输入实际经营地址"
              maxlength="200"
              rows="3"
            ></textarea>
          </view>
        </view>
        
        <view class="form-group">
          <view class="form-label required">成立日期</view>
          <view class="form-control">
            <picker 
              mode="date" 
              :value="enterpriseInfo.establishDate" 
              start="1970-01-01" 
              :end="today"
              @change="onDateChange"
            >
              <view class="picker-view">
                {{ enterpriseInfo.establishDate || '请选择企业成立日期' }}
                <text class="picker-arrow">▼</text>
              </view>
            </picker>
          </view>
        </view>
        
        <view class="form-group">
          <view class="form-label">企业简介</view>
          <view class="form-control">
            <textarea 
              v-model="enterpriseInfo.description" 
              placeholder="请简要介绍企业主营业务、规模等（300字以内）"
              maxlength="300"
              rows="4"
            ></textarea>
            <view class="word-count">{{ enterpriseInfo.description.length }}/300</view>
          </view>
        </view>
      </view>
      
      <!-- 步骤2：资质认证 -->
      <view class="form-step" v-if="currentStep === 2">
        <view class="form-header">
          <view class="form-title">企业资质认证</view>
          <view class="form-desc">请上传清晰的资质证明文件，支持JPG、PNG格式，单张不超过5MB</view>
        </view>
        
        <view class="form-group">
          <view class="form-label required">营业执照</view>
          <view class="form-control upload-control">
            <view class="upload-area" @click="chooseImage('businessLicense')" v-if="!enterpriseInfo.businessLicense">
              <view class="upload-icon">+</view>
              <view class="upload-text">点击上传营业执照</view>
            </view>
            <view class="preview-image" v-if="enterpriseInfo.businessLicense">
              <image 
                :src="enterpriseInfo.businessLicense" 
                mode="aspectFill"
              ></image>
              <view class="delete-btn" @click="deleteImage('businessLicense')">×</view>
            </view>
            <view class="upload-desc">需上传清晰的营业执照照片，包含注册号、法人信息等</view>
          </view>
        </view>
        
        <view class="form-group">
          <view class="form-label required">法人身份证正面</view>
          <view class="form-control upload-control">
            <view class="upload-area" @click="chooseImage('legalIdFront')" v-if="!enterpriseInfo.legalIdFront">
              <view class="upload-icon">+</view>
              <view class="upload-text">点击上传法人身份证正面</view>
            </view>
            <view class="preview-image" v-if="enterpriseInfo.legalIdFront">
              <image 
                :src="enterpriseInfo.legalIdFront" 
                mode="aspectFill"
              ></image>
              <view class="delete-btn" @click="deleteImage('legalIdFront')">×</view>
            </view>
          </view>
        </view>
        
        <view class="form-group">
          <view class="form-label required">法人身份证反面</view>
          <view class="form-control upload-control">
            <view class="upload-area" @click="chooseImage('legalIdBack')" v-if="!enterpriseInfo.legalIdBack">
              <view class="upload-icon">+</view>
              <view class="upload-text">点击上传法人身份证反面</view>
            </view>
            <view class="preview-image" v-if="enterpriseInfo.legalIdBack">
              <image 
                :src="enterpriseInfo.legalIdBack" 
                mode="aspectFill"
              ></image>
              <view class="delete-btn" @click="deleteImage('legalIdBack')">×</view>
            </view>
          </view>
        </view>
        
        <view class="form-group" v-if="enterpriseInfo.industryIndex === 3 || enterpriseInfo.industryIndex === 5 || enterpriseInfo.industryIndex === 8">
          <view class="form-label required">行业许可证</view>
          <view class="form-control upload-control">
            <view class="upload-area" @click="chooseImage('industryLicense')" v-if="!enterpriseInfo.industryLicense">
              <view class="upload-icon">+</view>
              <view class="upload-text">点击上传行业许可证</view>
            </view>
            <view class="preview-image" v-if="enterpriseInfo.industryLicense">
              <image 
                :src="enterpriseInfo.industryLicense" 
                mode="aspectFill"
              ></image>
              <view class="delete-btn" @click="deleteImage('industryLicense')">×</view>
            </view>
            <view class="upload-desc">根据行业要求，需提供相关经营许可证</view>
          </view>
        </view>
        
        <view class="form-group">
          <view class="form-label">银行开户许可证</view>
          <view class="form-control upload-control">
            <view class="upload-area" @click="chooseImage('bankLicense')" v-if="!enterpriseInfo.bankLicense">
              <view class="upload-icon">+</view>
              <view class="upload-text">点击上传银行开户许可证（可选）</view>
            </view>
            <view class="preview-image" v-if="enterpriseInfo.bankLicense">
              <image 
                :src="enterpriseInfo.bankLicense" 
                mode="aspectFill"
              ></image>
              <view class="delete-btn" @click="deleteImage('bankLicense')">×</view>
            </view>
          </view>
        </view>
        
        <view class="form-group">
          <view class="form-label">其他资质证明</view>
          <view class="form-control upload-control">
            <view class="upload-area" @click="chooseImage('otherCert')" v-if="!enterpriseInfo.otherCert">
              <view class="upload-icon">+</view>
              <view class="upload-text">点击上传其他资质证明（可选）</view>
            </view>
            <view class="preview-image" v-if="enterpriseInfo.otherCert">
              <image 
                :src="enterpriseInfo.otherCert" 
                mode="aspectFill"
              ></image>
              <view class="delete-btn" @click="deleteImage('otherCert')">×</view>
            </view>
            <view class="upload-desc">如ISO认证、获奖证书等可提升企业信用的证明文件</view>
          </view>
        </view>
      </view>
      
      <!-- 步骤3：账户设置 -->
      <view class="form-step" v-if="currentStep === 3">
        <view class="form-header">
          <view class="form-title">账户与联系人设置</view>
          <view class="form-desc">设置平台管理账户和主要联系人信息</view>
        </view>
        
        <view class="form-group">
          <view class="form-label required">登录账号（手机号）</view>
          <view class="form-control">
            <input 
              v-model="accountInfo.phone" 
              placeholder="请输入用于登录的手机号"
              type="number"
              maxlength="11"
            />
          </view>
        </view>
        
        <view class="form-group">
          <view class="form-label required">设置登录密码</view>
          <view class="form-control">
            <input 
              v-model="accountInfo.password" 
              placeholder="请设置6-20位密码，包含数字和字母"
              type="password"
              maxlength="20"
            />
          </view>
        </view>
        
        <view class="form-group">
          <view class="form-label required">确认登录密码</view>
          <view class="form-control">
            <input 
              v-model="accountInfo.confirmPassword" 
              placeholder="请再次输入密码"
              type="password"
              maxlength="20"
            />
          </view>
        </view>
        
        <view class="form-group">
          <view class="form-label required">联系人姓名</view>
          <view class="form-control">
            <input 
              v-model="contactInfo.name" 
              placeholder="请输入企业主要联系人姓名"
              maxlength="20"
            />
          </view>
        </view>
        
        <view class="form-group">
          <view class="form-label required">联系人职位</view>
          <view class="form-control">
            <input 
              v-model="contactInfo.position" 
              placeholder="请输入联系人职位"
              maxlength="30"
            />
          </view>
        </view>
        
        <view class="form-group">
          <view class="form-label required">联系人电话</view>
          <view class="form-control">
            <input 
              v-model="contactInfo.phone" 
              placeholder="请输入联系人电话"
              type="number"
              maxlength="11"
            />
          </view>
        </view>
        
        <view class="form-group">
          <view class="form-label required">联系人邮箱</view>
          <view class="form-control">
            <input 
              v-model="contactInfo.email" 
              placeholder="请输入联系人邮箱"
              type="email"
              maxlength="50"
            />
          </view>
        </view>
        
        <view class="agreement-section">
          <view class="agreement-confirm">
            <checkbox 
              v-model="agreementAccepted" 
              color="#165DFF"
            ></checkbox>
            <text class="confirm-text">我已阅读并同意《企业入驻服务协议》和《隐私政策》</text>
          </view>
        </view>
      </view>
      
      <!-- 步骤4：提交成功 -->
      <view class="form-step success-step" v-if="currentStep === 4">
        <view class="success-icon">✓</view>
        <view class="success-title">企业入驻申请已提交</view>
        <view class="success-subtitle">申请编号：{{ applicationNo }}</view>
        
        <view class="success-progress">
          <view class="progress-bar-container">
            <view class="progress-bar-fill" :style="{ width: '25%' }"></view>
          </view>
          <view class="progress-stages">
            <view class="stage active">已提交</view>
            <view class="stage">资料审核</view>
            <view class="stage">资质验证</view>
            <view class="stage">入驻完成</view>
          </view>
        </view>
        
        <view class="success-desc">
          您的申请已受理，我们将在3-5个工作日内完成审核，
          审核进度可通过申请编号查询，结果将通过短信通知您。
        </view>
        
        <view class="success-actions">
          <button class="action-btn check-btn" @click="checkProgress">
            查看审核进度
          </button>
          <button class="action-btn back-btn" @click="navToHome">
            返回首页
          </button>
        </view>
      </view>
    </view>

    <!-- 步骤导航按钮 -->
    <view class="form-actions" v-if="currentStep < 4">
      <button 
        class="action-btn prev-btn" 
        @click="prevStep"
        v-if="currentStep > 1"
      >
        上一步
      </button>
      <button 
        class="action-btn next-btn" 
        @click="nextStep"
        :disabled="!canProceed"
      >
        {{ currentStep < 3 ? '下一步' : '提交申请' }}
      </button>
    </view>

    <!-- 帮助弹窗 -->
    <u-popup 
      :show="helpPopup" 
      mode="center" 
	  @close="helpPopup = false"
   
    >
      <view class="help-dialog">
        <view class="dialog-title">企业入驻帮助</view>
        <view class="dialog-content">
          <view class="help-item">
            <view class="help-question">Q：企业入驻需要哪些条件？</view>
            <view class="help-answer">A：需提供有效的营业执照、法人身份证等资质文件，企业经营状态正常。</view>
          </view>
          <view class="help-item">
            <view class="help-question">Q：审核需要多长时间？</view>
            <view class="help-answer">A：提交申请后，我们将在3-5个工作日内完成审核，审核结果将通过短信通知。</view>
          </view>
          <view class="help-item">
            <view class="help-question">Q：入驻是否需要支付费用？</view>
            <view class="help-answer">A：平台暂不收取入驻费用，交易时会根据行业收取一定比例的服务费。</view>
          </view>
          <view class="help-item">
            <view class="help-question">Q：如何查询审核进度？</view>
            <view class="help-answer">A：提交申请后会生成申请编号，可通过"查看审核进度"功能查询实时状态。</view>
          </view>
        </view>
        <button class="dialog-close-btn" @click="closeHelp">我知道了</button>
      </view>
    </u-popup>
  </view>
</template>

<script>

export default {

  data() {
    // 生成今天的日期
    const today = new Date();
    const year = today.getFullYear();
    const month = (today.getMonth() + 1).toString().padStart(2, '0');
    const day = today.getDate().toString().padStart(2, '0');
    
    // 生成随机申请编号
    const applicationNo = 'EP' + Date.now().toString().slice(-8) + Math.floor(Math.random() * 1000).toString().padStart(3, '0');
    
    return {
      // 当前步骤
      currentStep: 1,
      
      // 今天的日期
      today: `${year}-${month}-${day}`,
      
      // 申请编号
      applicationNo,
      
      // 企业类型选项
      enterpriseTypes: ['有限责任公司', '股份有限公司', '合伙企业', '国有企业', '外资企业', '其他'],
      
      // 行业选项
      industryOptions: [
        '信息技术', '制造业', '金融服务', '医疗健康', '教育培训',
        '文化娱乐', '零售批发', '餐饮住宿', '交通运输', '房地产',
        '法律咨询', '广告传媒', '物流仓储', '其他行业'
      ],
      helpPopup:false,
      // 企业信息
      enterpriseInfo: {
        name: '',
        creditCode: '',
        typeIndex: 0,
        industryIndex: 0,
        registerAddress: '',
        businessAddress: '',
        establishDate: '',
        description: '',
        businessLicense: '',
        legalIdFront: '',
        legalIdBack: '',
        industryLicense: '',
        bankLicense: '',
        otherCert: ''
      },
      
      // 账户信息
      accountInfo: {
        phone: '',
        password: '',
        confirmPassword: ''
      },
      
      // 联系人信息
      contactInfo: {
        name: '',
        position: '',
        phone: '',
        email: ''
      },
      
      // 协议同意状态
      agreementAccepted: false
    };
  },
  
  computed: {
    // 判断是否可以进入下一步
    canProceed() {
      if (this.currentStep === 1) {
        // 验证企业基本信息
        return this.enterpriseInfo.name && 
               this.enterpriseInfo.creditCode && 
               this.enterpriseInfo.creditCode.length === 18 &&
               this.enterpriseInfo.registerAddress && 
               this.enterpriseInfo.businessAddress && 
               this.enterpriseInfo.establishDate;
      } else if (this.currentStep === 2) {
        // 验证资质认证
        let required = this.enterpriseInfo.businessLicense && 
                      this.enterpriseInfo.legalIdFront && 
                      this.enterpriseInfo.legalIdBack;
        
        // 特定行业需要行业许可证
        if ([3, 5, 8].includes(this.enterpriseInfo.industryIndex)) {
          required = required && this.enterpriseInfo.industryLicense;
        }
        
        return required;
      } else if (this.currentStep === 3) {
        // 验证账户设置
        const phoneReg = /^1[3-9]\d{9}$/;
        const emailReg = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
        const passwordReg = /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{6,20}$/;
        
        return phoneReg.test(this.accountInfo.phone) &&
               passwordReg.test(this.accountInfo.password) &&
               this.accountInfo.password === this.accountInfo.confirmPassword &&
               this.contactInfo.name &&
               this.contactInfo.position &&
               phoneReg.test(this.contactInfo.phone) &&
               emailReg.test(this.contactInfo.email) &&
               this.agreementAccepted;
      }
      
      return false;
    }
  },
  
  methods: {
    // 返回上一页
    navBack() {
      uni.navigateBack({ delta: 1 });
    },
    
    // 显示帮助弹窗
    showHelp() {
      this.$refs.helpPopup.open();
    },
    
    // 关闭帮助弹窗
    closeHelp() {
      this.$refs.helpPopup.close();
    },
    
    // 上一步
    prevStep() {
      if (this.currentStep > 1) {
        this.currentStep--;
        // 滚动到顶部
        uni.pageScrollTo({ scrollTop: 0, duration: 300 });
      }
    },
    
    // 下一步/提交
    nextStep() {
      if (!this.canProceed) return;
      
      if (this.currentStep < 3) {
        this.currentStep++;
        // 滚动到顶部
        uni.pageScrollTo({ scrollTop: 0, duration: 300 });
      } else {
        // 提交申请
        this.submitApplication();
      }
    },
    
    // 提交申请
    submitApplication() {
      uni.showLoading({ title: '提交中...' });
      
      // 模拟API提交
      setTimeout(() => {
        uni.hideLoading();
        // 提交成功，进入下一步
        this.currentStep++;
      }, 2000);
    },
    
    // 企业类型变更
    onTypeChange(e) {
      this.enterpriseInfo.typeIndex = e.detail.value;
    },
    
    // 行业变更
    onIndustryChange(e) {
      this.enterpriseInfo.industryIndex = e.detail.value;
    },
    
    // 日期变更
    onDateChange(e) {
      this.enterpriseInfo.establishDate = e.detail.value;
    },
    
    // 选择图片
    chooseImage(type) {
      uni.chooseImage({
        count: 1,
        sizeType: ['compressed'],
        sourceType: ['album', 'camera'],
        success: (res) => {
          const tempFilePath = res.tempFilePaths[0];
          
          // 检查图片大小
          uni.getFileInfo({
            filePath: tempFilePath,
            success: (fileInfo) => {
              // 限制5MB
              if (fileInfo.size > 5 * 1024 * 1024) {
                uni.showToast({
                  title: '图片大小不能超过5MB',
                  icon: 'none',
                  duration: 2000
                });
                return;
              }
              
              // 保存图片路径
              this.enterpriseInfo[type] = tempFilePath;
            }
          });
        }
      });
    },
    
    // 删除图片
    deleteImage(type) {
      this.enterpriseInfo[type] = '';
    },
    
    // 查看审核进度
    checkProgress() {
      uni.navigateTo({ 
        url: `/pages/business/audit-progress?no=${this.applicationNo}` 
      });
    },
    
    // 返回首页
    navToHome() {
      uni.reLaunch({ url: '/pages/index/index' });
    }
  }
};
</script>

<style scoped lang="scss">
// 颜色变量
$primary-color: #165DFF;
$primary-dark: #0E42D2;
$primary-light: #E8F3FF;
$accent-color: #D4AF37;
$text-primary: #1D2129;
$text-secondary: #4E5969;
$text-tertiary: #86909C;
$background: #F5F7FA;
$card-bg: #FFFFFF;
$border-color: #E5E6EB;
$success-color: #00B42A;
$danger-color: #F5222D;

.enterprise-entry-page {
  background-color: $background;
  min-height: 100vh;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  padding-top: var(--status-bar-height);
}

// 自定义导航栏
.custom-nav-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 90rpx;
  padding: 0 30rpx;
  background-color: $card-bg;
  border-bottom: 1px solid $border-color;
  
  .nav-left, .nav-right {
    width: 60rpx;
    height: 60rpx;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .back-icon {
    font-size: 45rpx;
    color: $text-primary;
  }
  
  .help-icon {
    width: 36rpx;
    height: 36rpx;
    background-color: $primary-light;
    color: $primary-color;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24rpx;
    font-weight: bold;
  }
  
  .nav-title {
    font-size: 34rpx;
    font-weight: 600;
    color: $text-primary;
  }
}

// 进度条
.progress-bar {
  background-color: $card-bg;
  padding: 30rpx 20rpx;
  margin-bottom: 20rpx;
  
  .progress-steps {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
  }
  
  .progress-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 2;
    width: 24%;
    
    .step-number {
      width: 56rpx;
      height: 56rpx;
      border-radius: 50%;
      background-color: $border-color;
      color: $text-tertiary;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 28rpx;
      font-weight: 600;
      margin-bottom: 12rpx;
      position: relative;
      z-index: 1;
    }
    
    .step-name {
      font-size: 24rpx;
      color: $text-tertiary;
      text-align: center;
      white-space: nowrap;
    }
    
    &.active {
      .step-number {
        background-color: $primary-color;
        color: #fff;
        box-shadow: 0 4rpx 12rpx rgba(22, 93, 255, 0.3);
      }
      
      .step-name {
        color: $primary-color;
        font-weight: 500;
      }
    }
    
    &.completed {
      .step-number {
        background-color: $primary-color;
        color: #fff;
        
        &::after {
          content: '✓';
          position: absolute;
          font-size: 30rpx;
        }
      }
      
      .step-name {
        color: $primary-color;
      }
    }
  }
  
  .progress-line {
    flex: 1;
    height: 6rpx;
    background-color: $border-color;
    position: relative;
    z-index: 1;
    margin: 0 5rpx;
    
    &.active {
      background-color: $primary-color;
    }
  }
}

// 表单容器
.form-container {
  padding: 0 20rpx 140rpx;
  
  .form-step {
    background-color: $card-bg;
    border-radius: 20rpx;
    padding: 30rpx;
    box-shadow: 0 4rpx 20rpx rgba(0,0,0,0.06);
  }
  
  .form-header {
    margin-bottom: 30rpx;
    
    .form-title {
      font-size: 32rpx;
      font-weight: 600;
      color: $text-primary;
      margin-bottom: 10rpx;
    }
    
    .form-desc {
      font-size: 24rpx;
      color: $text-tertiary;
      line-height: 1.5;
    }
  }
  
  .form-group {
    margin-bottom: 35rpx;
    
    .form-label {
      display: block;
      font-size: 26rpx;
      color: $text-primary;
      margin-bottom: 12rpx;
      font-weight: 500;
      
      &.required::after {
        content: '*';
        color: $danger-color;
        margin-left: 5rpx;
      }
    }
    
    .form-control {
      position: relative;
      
      input, textarea {
        width: 100%;
        padding: 22rpx;
        background-color: $background;
        border: 1px solid $border-color;
        border-radius: 12rpx;
        font-size: 26rpx;
        color: $text-primary;
        box-sizing: border-box;
      }
      
      textarea {
        min-height: 120rpx;
        resize: none;
        padding-top: 18rpx;
      }
      
      input::placeholder, textarea::placeholder {
        color: $text-tertiary;
      }
      
      .word-count {
        position: absolute;
        right: 20rpx;
        bottom: 15rpx;
        font-size: 22rpx;
        color: $text-tertiary;
      }
    }
  }
  
  // 上传控件样式
  .upload-control {
    .upload-area {
      width: 100%;
      height: 220rpx;
      border: 2rpx dashed $border-color;
      border-radius: 12rpx;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      background-color: $background;
      margin-bottom: 12rpx;
      
      .upload-icon {
        font-size: 56rpx;
        color: $text-tertiary;
        margin-bottom: 15rpx;
      }
      
      .upload-text {
        font-size: 26rpx;
        color: $text-tertiary;
      }
    }
    
    .preview-image {
      width: 100%;
      height: 220rpx;
      border-radius: 12rpx;
      overflow: hidden;
      position: relative;
      margin-bottom: 12rpx;
      
      image {
        width: 100%;
        height: 100%;
      }
      
      .delete-btn {
        position: absolute;
        top: 10rpx;
        right: 10rpx;
        width: 44rpx;
        height: 44rpx;
        background-color: rgba(0,0,0,0.6);
        color: #fff;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 26rpx;
      }
    }
    
    .upload-desc {
      font-size: 24rpx;
      color: $text-tertiary;
      line-height: 1.4;
    }
  }
  
  // 选择器样式
  .picker-view {
    width: 100%;
    padding: 22rpx;
    background-color: $background;
    border: 1px solid $border-color;
    border-radius: 12rpx;
    font-size: 26rpx;
    color: $text-primary;
    display: flex;
    justify-content: space-between;
    align-items: center;
    
    .picker-arrow {
      color: $text-tertiary;
      font-size: 26rpx;
    }
  }
  
  // 协议部分
  .agreement-section {
    margin-top: 30rpx;
    
    .agreement-confirm {
      display: flex;
      align-items: flex-start;
      
      checkbox {
        transform: scale(0.85);
        margin-right: 10rpx;
        margin-top: 5rpx;
      }
      
      .confirm-text {
        font-size: 24rpx;
        color: $text-secondary;
        line-height: 1.5;
      }
    }
  }
  
  // 成功页面
  .success-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60rpx 30rpx;
    text-align: center;
    
    .success-icon {
      width: 140rpx;
      height: 140rpx;
      border-radius: 50%;
      background-color: rgba(0, 180, 42, 0.1);
      color: $success-color;
      font-size: 70rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 35rpx;
    }
    
    .success-title {
      font-size: 36rpx;
      font-weight: 600;
      color: $text-primary;
      margin-bottom: 15rpx;
    }
    
    .success-subtitle {
      font-size: 26rpx;
      color: $text-secondary;
      margin-bottom: 40rpx;
      padding: 12rpx 20rpx;
      background-color: $background;
      border-radius: 8rpx;
    }
    
    .success-progress {
      width: 100%;
      margin-bottom: 40rpx;
      padding: 0 20rpx;
      
      .progress-bar-container {
        height: 8rpx;
        background-color: $border-color;
        border-radius: 4rpx;
        margin-bottom: 20rpx;
        
        .progress-bar-fill {
          height: 100%;
          background-color: $primary-color;
          border-radius: 4rpx;
          transition: width 0.5s ease;
        }
      }
      
      .progress-stages {
        display: flex;
        justify-content: space-between;
        
        .stage {
          font-size: 22rpx;
          color: $text-tertiary;
          
          &.active {
            color: $primary-color;
            font-weight: 500;
          }
        }
      }
    }
    
    .success-desc {
      font-size: 26rpx;
      color: $text-secondary;
      line-height: 1.6;
      margin-bottom: 50rpx;
      padding: 0 20rpx;
    }
    
    .success-actions {
      display: flex;
      gap: 20rpx;
      width: 100%;
      
      .action-btn {
        flex: 1;
        height: 88rpx;
        line-height: 88rpx;
        border-radius: 12rpx;
        font-size: 28rpx;
        font-weight: 500;
      }
      
      .check-btn {
        background-color: $primary-color;
        color: #fff;
        border: none;
        box-shadow: 0 4rpx 12rpx rgba(22, 93, 255, 0.25);
      }
      
      .back-btn {
        background-color: $background;
        color: $text-primary;
        border: 1px solid $border-color;
      }
    }
  }
}

// 表单操作按钮
.form-actions {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: $card-bg;
  padding: 25rpx 20rpx;
  display: flex;
  gap: 20rpx;
  border-top: 1px solid $border-color;
  z-index: 10;
  
  .action-btn {
    flex: 1;
    height: 88rpx;
    line-height: 88rpx;
    border-radius: 12rpx;
    font-size: 28rpx;
    font-weight: 500;
  }
  
  .prev-btn {
    background-color: $background;
    color: $text-primary;
    border: 1px solid $border-color;
  }
  
  .next-btn {
    background-color: $primary-color;
    color: #fff;
    border: none;
    box-shadow: 0 4rpx 12rpx rgba(22, 93, 255, 0.25);
  }
  
  .next-btn:disabled {
    background-color: #C9CDD4;
    color: #fff;
    box-shadow: none;
  }
}

// 帮助弹窗
.help-dialog {
  width: 620rpx;
  background-color: $card-bg;
  border-radius: 20rpx;
  padding: 35rpx;
  
  .dialog-title {
    font-size: 32rpx;
    font-weight: 600;
    color: $text-primary;
    text-align: center;
    margin-bottom: 30rpx;
    padding-bottom: 20rpx;
    border-bottom: 1px solid $border-color;
  }
  
  .dialog-content {
    max-height: 550rpx;
    overflow-y: auto;
    margin-bottom: 35rpx;
    
    .help-item {
      margin-bottom: 30rpx;
      
      &:last-child {
        margin-bottom: 0;
      }
    }
    
    .help-question {
      font-size: 26rpx;
      font-weight: 500;
      color: $text-primary;
      margin-bottom: 10rpx;
    }
    
    .help-answer {
      font-size: 24rpx;
      color: $text-secondary;
      line-height: 1.6;
      padding-left: 5rpx;
    }
  }
  
  .dialog-close-btn {
    width: 100%;
    height: 88rpx;
    line-height: 88rpx;
    background-color: $primary-color;
    color: #fff;
    border: none;
    border-radius: 12rpx;
    font-size: 28rpx;
    font-weight: 500;
  }
}
</style>
    